<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="spinner" *ngIf="loader">
    <mat-spinner></mat-spinner>
</div>
<main class="stock-dashboard">
    <div class="example-container">
        <mat-form-field appearance="standard">
            <mat-label>Select</mat-label>
            <mat-select (selectionChange)="getStockData()" [(ngModel)]="selectedCompany">
                <mat-option *ngFor="let company of this.companies" [value]="company.companyId">{{ company.companyName }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <div class="row">
        <div class="col-12" *ngIf="areaChartData" #stockChart>
            <google-chart #chart [type]="areaChartData.type" [data]="areaChartData.data" [columns]="areaChartData.columnNames"
                [options]="areaChartData.options" [width]="stockChart.offsetWidth" [height]="areaChartData.height" (error)="onError($event)">
            </google-chart>
        </div>
        <div class="col-12">
            <mat-card *ngIf="companies && companies.length == 0">
                <p> No stock data found!</p>
                <p> Please create a company and a simulation first by clicking on Manage Company and Manage Simulations, respectively.</p>
            </mat-card>
            <mat-card *ngIf="showNodata===true">
                <p> Simulation is not started for your selected company (<b>{{ this.companyName }}).</b></p>
                <p> Click <a href="javascript:void(0)" routerLink="/simulations" >here</a> to create simulation first.</p>
            </mat-card>
        </div>
    </div>
</main>
